<!-- 通报modal -->
<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="title" :width="1000" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '保存' && actionType != 'view'" type="primary" @click="handleSubmit">{{
        okText
    }}</a-button>
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-form :form="form" :class="{ disable: actionType == 'view' ? true : false }">
          <a-row :gutter="16">
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="监管对象">
                <span class="tabs_span" v-if="userSelect.name">{{ userSelect.name }} <a-icon type="close" style="margin-left: 10px;" @click="handleDelUser()" /></span>

                <a-button type="link" @click="handleSelectUser">
                  选择人员
                </a-button>
                <!-- <a-select showSearch optionFilterProp="children" v-decorator="[
        'supervisionObjectID',
        { rules: [{ required: true, message: '请选择监管对象!' }] },
    ]">
                  <a-select-option v-for="(item, index) in supervisionList" :key="item.value" :value="item.value">{{
        item.label }}</a-select-option>
                </a-select> -->
                <!-- <a-input v-decorator="['nation', { rules: [{ required: true, message: '请填写民族!' }] }]" /> -->
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="通报类型">
                <a-select showSearch optionFilterProp="children" v-decorator="[
        'notificationType',
        { rules: [{ required: true, message: '请选择通报类型!' }] },
    ]">
                  <a-select-option v-for="(item, index) in notificationTypeList" :key="item.value" :value="item.value">{{
        item.label }}</a-select-option>
                </a-select>
                <!-- <a-input v-decorator="['nation', { rules: [{ required: true, message: '请填写民族!' }] }]" /> -->
              </a-form-item>
            </a-col>

            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="具体情况及措施">
                <a-textarea placeholder="具体情况及措施" :rows="4" v-decorator="['situation']" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="通报时间">
                <a-date-picker format="YYYY-MM-DD" v-decorator="[
        'notificationTime',
        {
            rules: [
                { required: true, message: '请选择通报时间!' },
            ],
        },
  ]" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

      </div>
    </a-spin>
    <user-modal ref="userModal" @getList="handelGetUser" :selectKeyObj="userSelect"></user-modal>

  </a-modal>

</template>

<script>
import { getDicDropList } from '@/api/dict'
import { getSupervisionObjectList } from "@/api/allApi";
import userModal from './userRadio'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { userModal },
  data () {
    //这里存放数据
    return {
      a: null,
      action: "add",
      headers: {},
      currentId: null,
      CodeDisabled: false,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: "查看",
      visible: false,
      okText: "保存",
      cancelText: "取消",
      notificationTypeList: [],
      supervisionList: [],
      userSelect: {},
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    getSupervisionObjectList({ index: 1, pageSize: 999, }).then((res) => {
      this.supervisionList = res.data.map((el) => {
        return { value: el.id, label: el.name };
      });
    });
    getDicDropList({ CategoryId: 2077 }).then(res => {
      this.notificationTypeList = res.data.map(el => { return { value: el.ID, label: el.Title } })
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  //方法集合
  methods: {
    view (data) {
      if (data) {
        Object.assign(this, {
          spinning: true,
          visible: true,
          CodeDisabled: false,
          currentId: data.id,
        });
        this.initData(data);
      } else {
        this.visible = true;
        this.form.resetFields()
        this.currentId = null;
      }
      switch (this.actionType) {
        case "add":
          this.okText = '保存'
          this.title = "添加通报记录";
          break;
        case "edit":
          this.okText = '保存'
          this.title = "编辑通报记录";
          break;
        case "view":
          this.title = "查看通报记录";
          this.okText = "取消";
          break;
      }
    },

    closeModal () {
      this.form.resetFields()
      this.visible = false
    },

    initData (data) {
      this.userSelect.id = data.supervisionObjectID,
        this.userSelect.name = data.SupervisionObjectName,
        setTimeout(() => {
          this.spinning = false;
          this.form.setFieldsValue({
            ...data,
            notificationTime: this.$moment(data.notificationTime)
          });
        }, 500);
    },
    handleSelectUser () {
      this.$refs.userModal.view()
    },
    handelGetUser (val) {
      console.log(3344444, val)
      this.userSelect = val
    },
    handleDelUser () {
      this.userSelect = {}
    },

    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!this.userSelect.id) {
          this.$message.error('先选择对象')
          return
        }
        if (!err) {
          console.log('Received values of form: ', values);
          let params = {
            ...values,
            id: this.currentId || '',
            supervisionObjectID: this.userSelect.id,
            SupervisionObjectName: this.userSelect.name,
            notificationTime: this.$moment(values.notificationTime).format('YYYY-MM-DD')
          }
          this.$emit("save", { ...params });

        }
      });
    },
  },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.spin-content {
  padding: 20px;
}

.disable {
  pointer-events: none;
}
</style>